<template>
  <CollapseContainer title="系统设置" :canExpan="false">
    <List>
      <template v-for="item in list" :key="item.key">
        <ListItem>
          <ListItemMeta>
            <template #title>
              {{ item.title }}
              <Switch
                class="extra"
                checked-children="开"
                un-checked-children="关"
                default-checked
              />
            </template>
            <template #description>
              <div>{{ item.description }}</div>
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </CollapseContainer>
  <CollapseContainer title="选择设置" :canExpan="false">
    <List>
      <ListItem>
        <ListItemMeta>
          <template #title>
            预览设置
            <Select
              class="extra"
              style="width: 150px"
              allowClear
              @change="changePreview"
              v-model:value="previewId"
            >
              <SelectOption v-for="option in previewList" :key="option.id" :value="option.id">
                {{ option.resourceName }}
              </SelectOption>
            </Select>
          </template>
          <template #description>
            <div>kkFile: 适用于Office全家桶；autoVue: 适用于Dwg图纸预览</div>
          </template>
        </ListItemMeta>
      </ListItem>
    </List>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { List, ListItem, ListItemMeta, Switch, Select, SelectOption } from 'ant-design-vue';
  import { CollapseContainer } from '/@/components/Container';
  import { GetResourceList } from '/@/api/demo/dict';
  import { CreatePreviewSetting, GetPreviewSettings } from '/@/api/demo/document';

  import { SystemList } from './data';

  const list = SystemList;
  const previewList = ref([]);
  // 预览方式id
  const previewId = ref('');

  // 获取预览资源列表
  GetResourceList({ TypeName: '预览方式' }).then((res) => {
    previewList.value = res;
  });

  // 查询全局设置预览方式
  const GetPreviewSet = () => {
    GetPreviewSettings().then((res) => {
      previewId.value = res[0].id;
    });
  };

  GetPreviewSet();

  // 修改全局设置预览方式
  const changePreview = (value, option) => {
    CreatePreviewSetting(option.key, '预览').then(() => {
      GetPreviewSet();
    });
  };
</script>
<style lang="less" scoped>
  .extra {
    float: right;
    margin-top: 10px;
    margin-right: 30px;
  }
</style>
